<template>
    <div ref="catalogue" class="catalogue">
        <div class="menus" v-for="(menu, index) in menus" :key="index">
            <div class="menuname">{{menu.name}}</div>
            <div class="cell" v-for="(item, index) in menu.list" :key="index" @click="toView(item.path)">
                {{item.name}}
            </div>
        </div>
    </div>
</template>
<script setup>
    import { onMounted, ref, reactive } from 'vue'
    import { useRouter } from 'vue-router';
    import scrollFixed from '../assets/js/listenstroll.js'
    import menulist from '../assets/json/menulist.json'

    const catalogue = ref(null)
    const menus = reactive(menulist)
    onMounted(() => {
        scrollFixed(catalogue.value)
    })

    const Router = useRouter()
    const toView = (e) => {
        Router.push(e)
    }
    
</script>
<style scoped>
    .catalogue{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 270px;
        height: 100vh;
        padding: 0 40px;
        overflow-y: scroll;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 9px 9px 7px rgb(229, 229, 229);
    }
    .menuname{
        margin: 20px auto;
        font-weight: 700;
    }
    .cell{
        margin: 20px auto;
    }
</style>